//引入自定义变量属性
@import '@/scss/var.scss';

.from_box {
  // width: dw(650px);
  // height: 100%;
  width: dw(600px);
  height: dw(620px);
  background-color: rgb(255, 255, 255);
  border-radius: dw(10px);
  // border-left: 1px solid gray;
  box-shadow: 0px 0px 13px 1px rgba(51, 51, 51, 0.1);
  display: flex;
  flex-flow: column;
  align-items: center;
  overflow-y: hidden;
  overflow-x: hidden;

  &::-webkit-scrollbar {
    width: 0;
  }

  

  //表单导航栏
  .from_nav {
    width: 100%;
    height: dw(72px);
    border-bottom: 0.5px solid $ColorOnclick;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .nav {
    
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .from_drop {
        margin-left:83%;
        font-size: dw(23px);


      }



      .create_title {
     
        margin-left: dw(25px);
      }

      .nav_out {
        margin-right: dw(28px);

        i {
          font-size: dw(22px);
          color: gray;
        }
      }

      .from_button {
        margin-left: dw(15px);
        // background-color: $ColorBlueBack;
        width: dw(120px);
        height: dw(38px);
        border-radius: dw(30px);
        display: flex;
        align-items: center;
        justify-content: center;

        span {
          margin: dw(5px);
        }
      }

      /* 表单不同状态样式 */
      .from_button_done {
        background-color: none;
        color: gray;
      }

      .from_button_undone {
        background-color: rgb(36, 169, 225);
        color: white;
      }

      .from_button_create {
        background-color: $ColorGreenFont;
        color: white;
      }
    }
  }

  //表单输入
  .from_inputs {
    margin-top: dw(12px);
    width: 98%;
    height: dw(200px);
    display: flex;
    flex-flow: column;
    align-items: center;

    .from_input {
      margin-top: dw(10px);
      width: 95%;
      border: none;
      min-height: dw(98px);
      padding: dw(10px);
      background-color: rgb(203, 203, 203, 0.2);

      border-radius: dw(10px);

      &::-webkit-scrollbar {
        width: 0;
      }
    }

    .from_input:hover {
      background-color: rgb(203, 203, 203, 0.5);
    }

    /* 表单设置时间样式 */
    .from_time {
      margin-top: dw(40px);
      // padding-top: dw(30px);
      margin-bottom: dw(20px);
      display: flex;
      align-items: center;
      width: 95%;

      i {
        font-size: dw(20px);
      }

      span {
        margin-left: dw(5px);
        margin-right: dw(10px);
      }

      .time {
        width: 100%;
      }
    }
  }

  // 表单默认显示样式 

  .from_default {
    padding: dw(15px);
    color: gray;
    width: 95%;
    height: dw(200px);


    .create_button {
      margin-top: dw(200px);
      width: 100%;
      height: dw(72px);
      display: flex;
      justify-content: center;
      align-items: center;

      .from_button {
        margin-left: dw(15px);
        // background-color: $ColorBlueBack;
        background-color: rgb(36, 169, 225);
        color: white;
        width: dw(150px);
        height: dw(38px);
        border-radius: dw(30px);
        display: flex;
        align-items: center;
        justify-content: center;

        span {
          margin: dw(5px);
        }
      }
    }


    .showTime {
      margin-top: dw(50px);

      i {
        margin-left: dw(5px);
        font-size: dw(13px);
      }
    }

    .from_update {
      margin-top: dw(20px);
      width: 100%;
      max-height: dw(120px);
      overflow-y: scroll;
      border-top: 1px solid $ColorOnclick;

      ul {

        li {
          display: flex;
          justify-content: space-between;
          color: $ColorFromupdate;
          padding: dw(10px) dw(10px) dw(10px) dw(10px);
          font-size: dw(13px);
        }
      }
    }

    .from_update::-webkit-scrollbar {
      width: 0;
    }

    .move_recycle {
      // margin-top: dw(5px);
      width: 100%;
      height: dw(100px);
      display: flex;
      justify-content: center;
      align-items: center;
      div {
        cursor: pointer;


        display: flex;
        align-items: center;
        justify-content: center;
        width: dw(150px);
        height: dw(40px);
        border: 1px solid $ColorREFont;
        color: $ColorREFont;
        border-radius: dw(15px);
      }
    }


  }

}
//这是下拉列表
.dropI{
  i{
    color: rgb(248, 187, 29);
  }
  span{
  margin:dw(6px)
  }
}
